<template>
	<div>
    <!-- 添加筛选表单 -->
    <el-form :inline="true" :model="filterForm" class="demo-form-inline" style="margin-bottom: 20px;">
      <el-form-item label="用户名">
        <el-input v-model="filterForm.content" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="行为" style="width:200px">
        <el-select v-model="filterForm.operationType" placeholder="行为类型" clearable>
          <el-option label="登录" value="登录"></el-option>
          <el-option label="操作" value="操作"></el-option>
          <el-option label="修改" value="修改"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
            v-model="filterForm.createTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFilter">筛选</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>

		<el-table :data="tableData.records">
			<el-table-column label="用户名" prop="content"></el-table-column>
			<el-table-column label="行为" prop="operationType"></el-table-column>
			<el-table-column label="时间" prop="createTime"></el-table-column>
			<el-table-column label="角色" prop="userId">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.userId === '-1L'">管理员</el-tag>
					<el-tag type="success" v-else>管理员</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" >
				<template #default = "scope">
					<el-tag type="success" v-if="1 ===1 ">正常</el-tag>
					<el-tag type="success" v-else >正常</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 10px;" background
		v-model:current-page = "params.PageNo" :page-count = "tableData.pages" :total="tableData.total"
		@current-change = "getTableData"/>
	</div>
</template>

<script setup>
import { Avatar } from '@element-plus/icons-vue'
import { _axios } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import { get, post } from '@/plugins/axios'
import { ElMessageBox } from 'element-plus'
import url from './util'
const tableData = reactive({
  records: [],
  pages: 0,
  total: 0
})

const params = reactive({
  PageNo: 1,
  PageSize: 15,
})

// 添加筛选表单数据
const filterForm = reactive({
  content: '',
  operationType: '',
  createTimeRange: []
})

function getTableData(){
  // 构建筛选参数
  const filters = {
    content: filterForm.content,
    operationType: filterForm.operationType
  }

  // 添加时间范围筛选
  if (filterForm.createTimeRange && filterForm.createTimeRange.length === 2) {
    filters.createTimeStart = filterForm.createTimeRange[0].getTime();
    filters.createTimeEnd = filterForm.createTimeRange[1].getTime();
  }

  // 发送请求时添加筛选参数
  get(url.list, {
    ...params,
    filtersJson: JSON.stringify(filters)
  }, content => {
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}

// 处理筛选
function handleFilter() {
  params.PageNo = 1; // 重置到第一页
  getTableData();
}

// 重置筛选
function resetFilter() {
  filterForm.content = '';
  filterForm.operationType = '';
  filterForm.createTimeRange = [];
  handleFilter();
}

getTableData()
</script>

<style>
</style>